<template>
  <div class="partner">
    <Search @sendInfo="receiveInfo" :searchTitle="'型号搜索:'" />
    <div class="list">
      <el-row>
        <el-col :span="4"
          ><el-button icon="iconfont icon-jiahao" type="warning" @click="newCreate"
            >新建</el-button
          ></el-col
        >
      </el-row>
      <el-table
        ref="singleTable"
        :data="regionInfo.currentPageRecords"
        highlight-current-row
        center
        style="width: 100%"
      >
        <el-table-column align="center" label="序号" width="120" type="index" height="45">
        </el-table-column>
        <el-table-column align="center" property="name" label="型号名称"> </el-table-column>
        <el-table-column align="center" property="model" label="型号编码"> </el-table-column>
        <el-table-column align="center" label="设备图片">
          <template slot-scope="{ row }">
            <el-row type="flex" justify="center" align="middle">
              <img :src="row.image" />
            </el-row>
          </template>
        </el-table-column>
        <el-table-column align="center" label="货道行" property="vmRow"></el-table-column>
        <el-table-column align="center" property="vmCol" label="货道列"> </el-table-column>
        <el-table-column align="center" property="channelMaxCapacity" label="设备容量">
        </el-table-column>
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click.native="aditInfo(row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click.native="deleteInfo(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :searchTaskList="regionInfo"
        @currentSizeChange="(value) => (partnerInfoParams.pageSize = value)"
        @currentPageChange="(value) => (partnerInfoParams.pageIndex = value)"
      />
    </div>
    <!-- // 新建// 修改 -->
    <Dialog :dialogVisibleInfo="dialogVisiblePartner" @dialogClose="dialogClosePartner">
      <template #body>
        <el-form
          ref="ruleFormEdit"
          :model="partnerInfo"
          :rules="rulesEdit"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="型号名称:" prop="name">
            <el-input
              v-model="partnerInfo.name"
              placeholder="请输入"
              show-word-limit
              maxlength="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="型号编码:" prop="model">
            <el-input
              v-model="partnerInfo.model"
              placeholder="请输入（限制数字、字母、中划线、下划线）"
              show-word-limit
              maxlength="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="货道行数:" prop="vmRow" label-width="110px">
            <template>
              <el-input-number
                size="larger"
                v-model="partnerInfo.vmRow"
                :min="0"
                controls-position="right"
                class="inputNum"
              ></el-input-number>
            </template>
          </el-form-item>
          <el-form-item label="货道列数:" prop="vmCol" label-width="110px">
            <template>
              <el-input-number
                size="larger"
                v-model="partnerInfo.vmCol"
                :max="10"
                :min="0"
                controls-position="right"
                class="inputNum"
              ></el-input-number>
            </template>
          </el-form-item>
          <el-form-item label="货道容量:" prop="channelMaxCapacity" label-width="110px">
            <template>
              <el-input-number
                size="larger"
                v-model="partnerInfo.channelMaxCapacity"
                :max="10"
                :min="0"
                controls-position="right"
                class="inputNum"
              ></el-input-number>
            </template>
          </el-form-item>
          <el-form-item label="设备图片:" prop="image">
            <template>
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :multiple="false"
                :before-upload="beforeAvatarUpload"
                :http-request="upload"
              >
                <img v-if="partnerInfo.image" :src="partnerInfo.image" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
                <!-- 进度条 -->
                <el-progress
                  v-if="isShow"
                  type="circle"
                  :percentage="percentage"
                  class="progress"
                />
              </el-upload>
            </template>
          </el-form-item>
          <el-form-item class="confirm">
            <el-button type="primary" @click="submitForm">确认</el-button>
            <el-button @click="dialogVisiblePartner.dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </template>
    </Dialog>
  </div>
</template>

<script>
import { vmTypeAPI, uploadImageAPI, addEquipmentTypeAPI, repairEquipmentAPI } from '@/api'
export default {
  name: 'Partner',
  data() {
    return {
      // 搜索框
      searchInfo: '',
      // 获取合作商数据的参数
      partnerInfoParams: {
        pageIndex: 1,
        pageSize: 10
      },
      // 渲染区域列表的数据,
      regionInfo: {
        currentPageRecords: []
      },
      // 新建
      dialogVisiblePartner: {
        dialogTitle: '新增设备类型',
        dialogVisible: false,
        dialogWidth: '30%'
      },
      // 新增的信息
      partnerInfo: {
        name: '',
        model: '',
        vmRow: '',
        vmCol: '',
        channelMaxCapacity: '',
        image: ''
      },
      // 校验规则
      rulesEdit: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        model: [{ required: true, message: '不能为空', trigger: 'blur' }],
        vmRow: [{ required: true, message: '不能为空', trigger: 'blur' }],
        vmCol: [{ required: true, message: '不能为空', trigger: 'blur' }],
        channelMaxCapacity: [{ required: true, message: '不能为空', trigger: 'blur' }],
        image: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      // 商户的id
      partnerId: '',
      // 图片地址
      percentage: 0,
      isShow: false
    }
  },
  created() {
    this.fecthPartnerList(this.partnerInfoParams)
  },

  methods: {
    // 校验
    beforeAvatarUpload(file) {
      const fileList = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg', 'image/webp']
      const isType = fileList.includes(file.type)
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isType) {
        this.$message.error('上传头像图片只能是PNG/gif/jpeg/jpg/webp格式!')
      }
      if (!isLt10M) {
        this.$message.error('上传头像图片大小不能超过 10MB!')
      }
      return isType && isLt10M
    },
    // 自定义上传
    async upload(value) {
      console.log(value)
      // 显示进度条
      this.isShow = true
      const res = await uploadImageAPI({ fileName: value.file })
      this.partnerInfo.image = res.data
      this.isShow = false
    },
    // 搜索框事件
    receiveInfo(value) {
      if (this.searchInfo !== value) {
        this.searchInfo = value
        this.partnerInfoParams.pageIndex = 1
        this.fecthPartnerList({ ...this.partnerInfoParams, name: this.searchInfo })
      }
    },
    // 获取数据
    async fecthPartnerList(data) {
      const res = await vmTypeAPI(data)
      this.regionInfo = res.data
    },
    // 新增合作商的弹窗
    newCreate() {
      this.dialogVisiblePartner.dialogTitle = '新增设备类型'
      this.dialogVisiblePartner.dialogVisible = true
    },
    // 新增与修改的确认与提交
    submitForm() {
      this.$refs.ruleFormEdit.validate(async (valid) => {
        if (!valid) return
        if (!this.partnerId) {
          try {
            await addEquipmentTypeAPI(this.partnerInfo)
            this.$message({
              type: 'success',
              message: '新增成功',
              offset: 75
            })
            this.fecthPartnerList(this.partnerInfoParams)
            this.dialogVisiblePartner.dialogVisible = false
          } catch (error) {
            this.$message({
              type: 'error',
              message: error.response.data,
              offset: 75
            })
          }
        } else {
          try {
            await repairEquipmentAPI(this.partnerId, this.partnerInfo)
            this.$message({
              type: 'success',
              message: '修改成功',
              offset: 75
            })
            this.fecthPartnerList(this.partnerInfoParams)
            this.dialogVisiblePartner.dialogVisible = false
          } catch (error) {
            this.$message({
              type: 'error',
              message: error.response.data,
              offset: 75
            })
          }
        }
      })
    },
    // 修改
    aditInfo(row) {
      console.log(row)
      this.partnerId = row.typeId // 判断修改与新增的条件
      this.dialogVisiblePartner.dialogTitle = '修改设备类型'
      this.dialogVisiblePartner.dialogVisible = true
      this.partnerInfo = {
        name: row.name,
        model: row.model,
        vmRow: row.vmRow,
        vmCol: row.vmCol,
        channelMaxCapacity: row.channelMaxCapacity,
        image: row.image
      }
    },
    // 弹框的关闭事件
    dialogClosePartner() {
      this.$refs.ruleFormEdit.resetFields()
      this.partnerId = '' // 清空id
      // 新增的信息
      this.partnerInfo = {
        name: '',
        model: '',
        vmRow: '',
        vmCol: '',
        channelMaxCapacity: '',
        image: ''
      }
    },
    // 删除提示
    deleteInfo() {
      this.$notify({
        title: '提示',
        message: '演示系统，不支持此操作',
        type: 'warning',
        offset: 80,
        duration: 2000
      })
    }
  },
  watch: {
    partnerInfoParams: {
      handler() {
        this.fecthPartnerList({ ...this.partnerInfoParams, name: this.searchInfo })
      },
      deep: true
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.progress {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}
</style>
<style lang="less" scoped>
.list {
  padding: 20px 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 10px rgb(240, 239, 239);
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .el-col {
    margin-bottom: 20px;
  }
  /deep/.el-table th.el-table__cell {
    background-color: rgb(243, 246, 251);
  }
  /deep/tr.el-table__row {
    height: 45px !important;
  }

  /deep/.el-table td.el-table__cell {
    border: none;
    height: 0px;
    padding: 0;
    .el-button {
      height: 30px;
      line-height: 1px;
      margin: 10px 0 10px 10px;
      width: 80px;
    }
    .el-button--info,
    .el-button--success {
      width: 100px;
    }
  }
  /deep/.el-table th.el-table__cell.is-leaf {
    border: none;
  }
  /deep/.el-button--warning {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    text-align: center;
    .icon-jiahao:before {
      content: '\e726';
      margin-right: 5px;
    }
  }
  /deep/.el-button--info {
    background-color: #fbf4f0 !important;
    border: none;
    color: #333;
  }
  /deep/.el-table::before {
    height: 0;
  }
}
.confirm {
  width: 100%;
  padding-left: 20%;
  /deep/.el-button--primary {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
  }
}
</style>
